<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 前端接入示例</title>
    <!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会导致验证码无法正常更新，对抗能力无法保证，甚至引起误拦截。 -->
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>

<body>
<button id="CaptchaId" type="button">验证</button>
</body>

<script>
  
      // 定义回调函数
      function callback(res) {
          // 第一个参数传入回调结果，结果如下：
          // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
          // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
          // CaptchaAppId       String    验证码应用ID。
          // bizState    Any       自定义透传参数。
          // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
          console.log('callback:', res);
  
  
          // res（用户主动关闭验证码）= {ret: 2, ticket: null}
          // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
          // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
          // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
          if (res.ret === 0) {
            // 复制结果至剪切板
            var str = '【randstr】->【' + res.randstr + '】      【ticket】->【' + res.ticket + '】';
            var ipt = document.createElement('input');
            ipt.value = str;
            document.body.appendChild(ipt);
            ipt.select();
            document.execCommand("Copy");
            document.body.removeChild(ipt);
            alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。 2. 打开浏览器控制台，查看完整返回结果。');
          }
      }
  
      // 定义验证码js加载错误处理函数
      function loadErrorCallback() {
        var appid = ''
        // 生成容灾票据或自行做其它处理
        var ticket = 'terror_1001_' + appid + Math.floor(new Date().getTime() / 1000);
        callback({
          ret: 0,
          randstr: '@'+ Math.random().toString(36).substr(2),
          ticket: ticket,
          errorCode: 1001,
          errorMessage: 'jsload_error'
        });
      }
  
      // 定义验证码触发事件
      window.onload = function(){
        document.getElementById('CaptchaId').onclick = function(){
          try {
            // 生成一个验证码对象
            // CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
            //callback：定义的回调函数
            var captcha = new TencentCaptcha('123', callback, {});
            // 调用方法，显示验证码
            captcha.show(); 
          } catch (error) {
            // 加载异常，调用验证码js加载错误处理函数
            loadErrorCallback();
            }
          }
      }
  </script>

</html>
  